<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>iOS 天气卡片</title>
    <style>
      :root {
        --blur: 20px;
        --card-bg: rgba(255, 255, 255, 0.2);
        --text: #fff;
        --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
      }
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
          Helvetica, Arial, sans-serif;
      }
      body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        overflow: hidden;
      }
      .glass {
        width: 360px;
        padding: 30px;
        border-radius: 24px;
        background: var(--card-bg);
        backdrop-filter: blur(var(--blur));
        -webkit-backdrop-filter: blur(var(--blur));
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: var(--shadow);
        color: var(--text);
      }
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        font-weight: 600;
      }
      .temp {
        font-size: 72px;
        font-weight: 300;
        line-height: 1;
        margin: 20px 0;
      }
      .condition {
        font-size: 22px;
        margin-bottom: 6px;
      }
      .range {
        font-size: 16px;
        opacity: 0.8;
      }
      .hourly {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        overflow-x: auto;
      }
      /*.hourly-item {*/
      /*  text-align: center;*/
      /*  flex: 1 0 60px;*/
      /*}*/
      .hourly-item img {
        width: 28px;
        height: 28px;
        margin: 6px 0;
      }
      .hourly-item div {
        font-size: 14px;
      }
      .daily {
        margin-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        padding-top: 18px;
      }
      /*.day-row {*/
      /*  display: flex;*/
      /*  justify-content: space-between;*/
      /*  align-items: center;*/
      /*  padding: 6px 0;*/
      /*  font-size: 17px;*/
      /*}*/
      .day-row img {
        width: 24px;
        height: 24px;
      }
      .details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-top: 24px;
        font-size: 15px;
      }
      .details div {
        background: rgba(255, 255, 255, 0.15);
        padding: 10px;
        border-radius: 12px;
      }
      .details span {
        display: block;
        font-size: 13px;
        opacity: 0.8;
        margin-bottom: 4px;
      }
      /* 动态背景 */
      @keyframes float {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-20px);
        }
        100% {
          transform: translateY(0);
        }
      }
      .bubble {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        animation: float 8s ease-in-out infinite;
      }
      .bubble:nth-child(1) {
        width: 120px;
        height: 120px;
        left: 10%;
        top: 20%;
        animation-delay: 0s;
      }
      .bubble:nth-child(2) {
        width: 80px;
        height: 80px;
        left: 80%;
        top: 60%;
        animation-delay: 2s;
      }
      .bubble:nth-child(3) {
        width: 60px;
        height: 60px;
        left: 70%;
        top: 10%;
        animation-delay: 4s;
      }
    </style>
  </head>
  <body>
    <!-- 装饰气泡 -->
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>

    <div class="glass">
      <div class="header">
        <span id="location">北京</span>
        <span id="update">刚刚更新</span>
      </div>

      <div class="temp" id="temp">28°</div>
      <div class="condition" id="condition">多云</div>
      <div class="range" id="range">最高31° · 最低22°</div>

      <div class="hourly" id="hourly"></div>

      <div class="daily" id="daily"></div>

      <div class="details">
        <div>
          <span>体感温度</span>
          <span id="feels">30°</span>
        </div>
        <div>
          <span>湿度</span>
          <span id="humidity">65%</span>
        </div>
        <div>
          <span>风速</span>
          <span id="wind">3 km/h</span>
        </div>
        <div>
          <span>气压</span>
          <span id="pressure">1013 hPa</span>
        </div>
      </div>
    </div>

    <script>
      // 模拟数据
      const hourlyData = [
        { t: "12", c: "☀️", v: "28°" },
        { t: "13", c: "☀️", v: "29°" },
        { t: "14", c: "⛅️", v: "30°" },
        { t: "15", c: "⛅️", v: "30°" },
        { t: "16", c: "☁️", v: "29°" },
        { t: "17", c: "☁️", v: "28°" },
      ];
      const dailyData = [
        { d: "今天", c: "⛅️", h: "31°", l: "22°" },
        { d: "明天", c: "☀️", h: "32°", l: "23°" },
        { d: "周四", c: "🌧️", h: "26°", l: "20°" },
        { d: "周五", c: "☁️", h: "27°", l: "21°" },
        { d: "周六", c: "☀️", h: "29°", l: "22°" },
      ];

      // 渲染逐小时
      const hBox = document.getElementById("hourly");
      hourlyData.forEach((p) => {
        const it = document.createElement("div");
        it.className = "hourly-item";
        it.innerHTML = `<div>${p.t}</div><div>${p.c}</div><div>${p.v}</div>`;
        hBox.appendChild(it);
      });

      // 渲染逐日
      const dBox = document.getElementById("daily");
      dailyData.forEach((p) => {
        const row = document.createElement("div");
        row.className = "day-row";
        row.innerHTML = `
                <span>${p.d}</span>
                <span>${p.c}</span>
                <span>${p.h}°/${p.l}°</span>`;
        dBox.appendChild(row);
      });

      // 模拟实时刷新
      setTimeout(() => {
        document.getElementById("update").textContent = "1分钟前更新";
        document.getElementById("temp").textContent = "27°";
      }, 30000);
    </script>
  </body>
</html>
